﻿
@{
    ViewBag.Title = "模块使用统计";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/echart/echarts.js"></script>
<script type="text/javascript">

    //初始化echart
    require.config({
        paths: {
            echarts: '../Scripts/echart'
        }
    });

</script>
<div class="title-content">模块统计</div>
<div class="row" style="margin-left:0px;margin-right:0px;">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light ">
            <div class="portlet-body">

                <div class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-6" style="width:30%">
                            <div class="dataTables_length" id="sample_1_length">
                                <label>
                                    显示条数 <select id="changePageSize" onchange="pageSizeChange()" class="form-control input-sm input-xsmall input-inline">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                </label>

                                <label>
                                    &nbsp; 版本 <select id="visions" onchange="pageSizeChange()" class="form-control input-sm input-xsmall input-inline">
                                        <option value="1">家园版</option>
                                        <option value="2">园丁版</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6" style="width:70%">
                            <div id="sample_1_filter" class="dataTables_filter">
                                <div class="col-md-6" style="width:40%">
                                    <div class="input-group input-sm date date-picker" style="margin-top:-7px" data-date-format="yyyy-mm-dd" data-date-end-date="" id="startTimes" >
                                        <input type="text" id="stime" class="form-control" placeholder="开始时间"  onchange="setMinTime(1)">
                                        <span class="input-group-btn">
                                            <button class="btn default" type="button">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-6" style="width:40%">
                                    <div class="input-group input-sm date date-picker" style="margin-top:-7px" data-date-format="yyyy-mm-dd" data-date-end-date="" id="endTimes">
                                        <input type="text" id="etime" class="form-control" placeholder="结束时间" onchange="setMinTime(2)">
                                        <span class="input-group-btn">
                                            <button class="btn default" type="button">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <div style="float:left; width:16%">
                                    <button type="button" class="btn btn-sm blue" onclick="pageSizeChange()">查找<i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="table-scrollable">
                            <table class="table table-striped table-bordered table-hover order-column dataTable no-footer" align="center" role="grid" aria-describedby="sample_1_info">
                                <thead>
                                    <tr role="row">
                                        <th class="td-text-center"> 幼儿园</th>
                                        <th class="td-text-center"> 校园新闻 </th>
                                        <th class="td-text-center"> 通知活动 </th>
                                        <th class="td-text-center"> 宝贝课程 </th>
                                        <th class="td-text-center teach"> 签到代接 </th>
                                        <th class="td-text-center"> 宝贝食谱 </th>
                                        <th class="td-text-center"> 宝贝视频 </th>
                                        <th class="td-text-center teach"> 校园简介 </th>
                                        <th class="td-text-center"> 互动留言 </th>
                                        <th class="td-text-center"> 成长档案</th>
                                        <th class="td-text-center"> 详情</th>
                                    </tr>
                                </thead>
                                <tbody id="gridTable"></tbody>
                            </table>
                            <script id="grid" type="text/html">
                                <% for(var i=0;i
                                <list.length;i++){ %>
                                    <% var item=list[i]; %>
                                    <tr class="gradeX" role="row" id="<%=item.schoolId %>">
                                        <td class="td-text-center"><%=item.schoolName %></td>
                                        <td class="td-text-center"><%=item.a1==null?"0":item.a1 %></td>
                                        <td class="td-text-center"><%=item.a2==null?"0":item.a2 %></td>
                                        <td class="td-text-center"><%=item.a3==null?"0":item.a3 %></td>
                                        <td class="td-text-center teach"><%=item.a4==null?"0":item.a4 %></td>
                                        <td class="td-text-center"><%=item.a5==null?"0":item.a5 %></td>
                                        <td class="td-text-center"><%=item.a6==null?"0":item.a6 %></td>
                                        <td class="td-text-center teach"><%=item.a7==null?"0":item.a7 %></td>
                                        <td class="td-text-center"><%=item.a8==null?"0":item.a8 %></td>
                                        <td class="td-text-center"><%=item.a9==null?"0":item.a9 %></td>
                                        <td class="td-text-center">
                                            <a class="btn btn-sm green" href="#stack1" onclick="setTime();reportInfo('<%= item.schoolId %>');" data-toggle="modal">详情</a>
                                        </td>
                                    </tr>
                                    <%}%>
                            </script>
                        </div>
                        <div class="row">
                            <div class="col-md-5 col-sm-5"><div class="dataTables_info" id="data_info">显示 1 到 10 共 0 条</div></div>
                            <div class="col-md-7 col-sm-7">
                                <!--加载分页控件-->
                                @Html.Partial("DataPager")
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" data-width="800">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title" style="float:left;line-height:30px;">统计时间:</h4>
        <div class="col-md-6" style="width:40%">
            <input type="text" name="name" value=" "  style="display:none;"/>
            <div class="input-group input-sm date date-picker" style="margin-top:-7px" data-date-format="yyyy-mm-dd">
                <input type="text" id="rtime" class="form-control" readonly="readonly" onchange="TimeChanges()">
                <span class="input-group-btn">
                    <button class="btn default" type="button">
                        <i class="fa fa-calendar"></i>
                    </button>
                </span>
            </div>


        </div>
    </div>
    <div id="charts" style="width:800px;height:550px; float:left; margin-top:8px;">

    </div>
</div>
<script type="text/javascript">

    //加载
    $(function () {
        GridData();
    });

    function setMinTime(type) {
        if (type==1) {
            var stime = $("#stime").val();
            $("#endTimes").datepicker("setStartDate", stime);
        }
        else {
            var etime = $("#etime").val();
            $("#startTimes").datepicker("setEndDate",etime)
        }
       
    }

    //给时间控件赋默认值
    function setTime() {
        //当前时间
        var times = getTimeNow();
        $("#rtime").val(times);
    }


    var i = 0;
    //时间统计,重新加载charts
    function TimeChanges() {
        if (i > 1) {
            reportInfo(Pub_schid);
            i = 0;
        }
        i++;
    }

    //得到当前时间
    function getTimeNow() {
        var dates = new Date();
        var month = (dates.getMonth() + 1) < 10 ? '0' + (dates.getMonth() + 1) : (dates.getMonth() + 1);
        var times = dates.getFullYear() + "-" + month + "-" + dates.getDate();
        return times;
    }

    //pageChange
    function pageSizeChange() {
        var vision = $("#visions").val();
        var count = $("#changePageSize").val();
        pageSize = count;
        pageIndex = 1;
        GridData();
    }
    //绑定数据
    function GridData() {
        var stime = $("#stime").val();
        var etime = $("#etime").val();
        var vision = $("#visions").val();
        $("#tNames").html(vision == "1" ? "&nbsp;家长" : "&nbsp;教师");
        //时间验证
        if (stime!="" && etime!="" && stime>etime) {
            AlertMsg("开始时间不能大于结束时间！");
            return;
        }
        $("#gridTable").html("");
        AjaxCustom({
            url: "/ModelReport/modelReports",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { pageIndex: pageIndex, pageSize: pageSize, stime: stime, etime: etime, vision: vision },
            callBack: function (obj) {
                var start = (obj.data.pageIndex - 1) * pageSize + 1;
                var end = obj.data.pageIndex * pageSize;
                $("#TotalCount").html(obj.data.total);//总行数
                if (obj.data.total == 0) {
                    $("#data_info").html("");
                    $("#gridTable").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>暂无数据</b></td></tr>");
                    document.getElementById('paging1').innerHTML = "";//分页控件代码为空
                } else {
                    if (pageIndex == obj.data.pageCount) {
                        $("#data_info").html("显示 " + start + " 到 " + obj.data.total + " 共 " + obj.data.total + " 条");
                    } else {
                        $("#data_info").html("显示 " + start + " 到 " + end + " 共 " + obj.data.total + " 条");
                    }
                    //加载数据
                    var gridData = template('grid', obj.data);
                    $("#gridTable").html(gridData);
                    //加载分页控件
                    loadPager(obj.data.pageIndex, obj.data.pageCount);
                    if (vision == "2") {
                        $(".teach").hide();
                    }
                    else {
                        $(".teach").show();
                    }
                }
            }
        });
    }

    var Pub_schid = "";

    //得到数据图表
    function reportInfo(schID) {
        
        Pub_schid = schID;
        //申明数组
        var times = new Array();
        var arr1 = new Array();
        var arr2 = new Array();
        var arr3 = new Array();
        var arr4 = new Array();
        var arr5 = new Array();
        var arr6 = new Array();
        var arr7 = new Array();
        var arr8 = new Array();
        var arr9 = new Array();

        //得到值
        var stime = $("#rtime").val();
        var etime = $("#etime").val();
        var vision = $("#visions").val();
        AjaxCustom({
            url: "/ModelReport/getModelChars",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { schoolid: schID, stime: stime, etime: etime, vision: vision },
            callBack: function (obj) {
                if (obj.data == null || obj.data == '') {
                    $("#banjiTBody").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>没有数据</b></td></tr>");
                } else {
                    $.each(obj.data, function (i, n) {
                        times[i] = n.days.substring(11, 16);
                        arr1[i] = n.a1;
                        arr2[i] = n.a2;
                        arr3[i] = n.a3;
                        arr4[i] = n.a4;
                        arr5[i] = n.a5;
                        arr6[i] = n.a6;
                        arr7[i] = n.a7;
                        arr8[i] = n.a8;
                        arr9[i] = n.a9;
                    });
                    getChart(times, arr1, arr2, arr3, arr4, arr5, arr6, arr7, arr8, arr9)
                }
            }
        });
    }
    //chars
    var myChart;
    //绑定char数据
    function getChart(times, arr1, arr2, arr3, arr4, arr5, arr6, arr7, arr8, arr9) {
        require(
        [
          'echarts',
          'echarts/chart/line' //按需加载
        ],
        function (ec) {
            myChart = ec.init(document.getElementById('charts'));
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                legend: {
                    selected: {
                        '通知活动': false,
                        '宝贝课程': false,
                        '签到代接': false,
                        '宝宝食谱': false,
                        '宝宝视频': false,
                        '校园简介': false,
                        '互动留言': false,
                        '成长档案': false
                    },
                    data: ['校园新闻', '通知活动', '宝贝课程', '签到代接', '宝宝食谱', '宝宝视频', '校园简介', '互动留言', '成长档案']
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
    {
        type: 'category',
        boundaryGap: false,
        data: times
    }
                ],
                yAxis: [
    {
        type: 'value'
    }
                ],
                series: [
    {
        name: '校园新闻',
        type: 'line',
        stack: '总量',
        data: arr1
    },
    {
        name: '通知活动',
        type: 'line',
        stack: '总量',
        data: arr2
    },
    {
        name: '宝贝课程',
        type: 'line',
        stack: '总量',
        data: arr3
    },
    {
        name: '签到代接',
        type: 'line',
        stack: '总量',
        data: arr4
    },
    {
        name: '宝宝食谱',
        type: 'line',
        stack: '总量',
        data: arr5
    }
    ,
    {
        name: '宝宝视频',
        type: 'line',
        stack: '总量',
        data: arr6
    }
     ,
    {
        name: '校园简介',
        type: 'line',
        stack: '总量',
        data: arr7
    }
     ,
    {
        name: '互动留言',
        type: 'line',
        stack: '总量',
        data: arr8
    }
     ,
    {
        name: '成长档案',
        type: 'line',
        stack: '总量',
        data: arr9
    }
                ]
            };
            myChart.setOption(option);
        }
    );

         
    }

</script>
